<template>
  <div ref="chartRef" class="w-full h-300px"></div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';

  export default defineComponent({
    name: 'PieChart',
  });
</script>

<script lang="ts" setup>
  import { onMounted, ref, Ref, onUnmounted } from 'vue';
  import { useECharts } from '/@/hooks/web/useECharts';
  import echarts from '/@/utils/lib/echarts';

  const chartRef = ref<HTMLDivElement | null>(null);
  const { setOptions, getInstance } = useECharts(chartRef as Ref<HTMLDivElement>);

  onMounted(() => {
    setOptions({
      title: {
        text: '家用电器',
        textStyle: {
          fontSize: 12,
        },
        subtext: '312',
        subtextStyle: {
          fontSize: 18,
        },
        left: 'center',
        top: 'center',
      },
      series: [
        {
          type: 'pie',
          data: [
            { name: '家用电器', value: 312 },
            { name: '食用酒水', value: 336 },
            { name: '个护健康', value: 342 },
            { name: '服饰箱包', value: 41 },
            { name: '母婴产品', value: 188 },
            { name: '其他', value: 94 },
          ],
          radius: [50, 100],
          itemStyle: {
            borderWidth: 2,
            borderColor: '#fff',
          },
          label: {
            formatter: `{b}: {c}`,
          },
        },
        // {
        //   type: 'pie',
        //   data: [
        //     { name: '家用电器', value: 312 },
        //     { name: '食用酒水', value: 336 },
        //     { name: '个护健康', value: 342 },
        //     { name: '服饰箱包', value: 41 },
        //     { name: '母婴产品', value: 188 },
        //     { name: '其他', value: 94 },
        //   ],
        //   radius: [60, 120],
        //   itemStyle: {
        //     borderWidth: 2,
        //     borderColor: '#fff',
        //   },
        //   label: {
        //     formatter: `{b}: {c}`,
        //     position: 'center',
        //   },
        // },
      ],
    });

    const chart = getInstance();

    (chart as echarts.ECharts).on('mouseover', function (params: any) {
      const name: string = params.data.name;
      const value: string = params.data.value;

      (chart as echarts.ECharts).setOption({
        title: {
          text: name,
          subtext: value,
        },
      });
    });
  });

  onUnmounted(() => {
    const chart = getInstance();
    (chart as echarts.ECharts).off('mouseover');
  });
</script>
